<template>
    <div class="goods_container">
        <div class="header">
            <div class="time">10:00</div>
            <div class="icons">
                <img src="@/assets/mall/micon.png" />
                <img src="@/assets/mall/dicon.png" />
                <img src="@/assets/mall/picon.png" />
            </div>
        </div>
        <div class="nav">
            <div class="left">
                <img src="@/assets/mall/jicon.png" />
            </div>
            <div class="center">{{ state.goodsName }}</div>
            <div class="right">
                <img src="@/assets/mall/bicon.png" />
            </div>
        </div>
        <div class="mainimg">
            <div class="swiper_square">
                <div class="counter" v-if="state.mainImgList.length">
                    {{ state.swiperCurrentIndex }}/{{ state.mainImgList.length }}
                </div>
                <swiper
                    disable-touch="true"
                    circular="true"
                    autoplay="true"
                    class="swiper_content"
                    interval="5000"
                    @change="changeSwiper">
                    <swiper-item v-for="(item, index) in state.mainImgList" :key="index">
                        <image class="tabimg" :src="item?.materialSrc" :lazy-load="true" mode="aspectFill" />
                    </swiper-item>
                </swiper>
            </div>
        </div>
        <div class="goods_text">
            <div class="goods_top">
                <div class="goods_name">{{ state.goodsName }}</div>
                <div class="share">
                    <img src="@/assets/mall/share.png" />
                    <div class="share_text">分享</div>
                </div>
            </div>
            <div class="goods_price_box">
                <div class="goods_price">
                    <span class="fz10">￥</span>
                    <span class="fz16">{{ state.minPriceArr[0] }}</span>
                    <span class="fz16" v-if="state.minPriceArr[1]">.</span>
                    <span class="fz10" v-if="state.minPriceArr[1]">{{ state.minPriceArr[1] }}</span>
                </div>
                <div v-if="state.minPrice != state.maxPriceArr" class="goods_price">
                    <span class="fz16"> ~ </span>
                    <span class="fz16">{{ state.maxPriceArr[0] }}</span>
                    <span class="fz16" v-if="state.maxPriceArr[1]">.</span>
                    <span class="fz10" v-if="state.maxPriceArr[1]">{{ state.maxPriceArr[1] }}</span>
                </div>
            </div>
        </div>
        <div class="list_box">
            <!-- <div class="list_item">
                <div class="list_item_left">优惠券</div>
                <div class="list_item_center active">满200减30</div>
                <div class="list_item_right"><img src="@/assets/mall/righticon.png" /></div>
            </div> -->
            <div class="list_item">
                <div class="list_item_left">规格</div>
                <div class="list_item_center">{{ state.specificationText }}</div>
                <div class="list_item_right"><img src="@/assets/mall/righticon.png" /></div>
            </div>
            <div class="list_item">
                <div class="list_item_left">服务</div>
                <div class="list_item_center">{{ state.serveText }}</div>
                <div class="list_item_right"><img src="@/assets/mall/righticon.png" /></div>
            </div>
        </div>
        <div class="detail">
            <div class="detail_header">
                <div class="detail_header_left"></div>
                <div class="detail_header_center">商品详情</div>
                <div class="detail_header_right"></div>
            </div>
            <div class="detail_main">
                <rich-text type="text" :nodes="state.goodsDescription"></rich-text>
            </div>
        </div>
        <div class="footer">
            <div class="footer_left">
                <div class="icon_box">
                    <div class="icon_top">
                        <img src="@/assets/mall/home.png" />
                    </div>
                    <div class="icon_text">首页</div>
                </div>
                <div class="icon_box">
                    <div class="icon_top">
                        <img src="@/assets/mall/carticon.png" />
                    </div>
                    <div class="icon_text">购物车</div>
                </div>
            </div>
            <div v-if="state.onSale === 1" class="footer_right">
                <div class="button">加入购物车</div>
                <div class="button">立即购买</div>
            </div>
            <div v-else class="footer_right">
                <div class="button_disabled">{{ state.onSale === 3 ? '已售罄' : '已下架' }}</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getUrlParam, floatDivide } from '@/commons/utils';
import request from '@/request';
import { nextTick, onMounted, getCurrentInstance, reactive, onUnmounted } from 'vue';
const instance = getCurrentInstance();
const state = reactive({
    mainImgList: [], // 封面图list
    currentCoverIndex: 0, // 封面图索引
    currentCoverUrl: '',
    swiperCurrentIndex: 1,
    minPrice: 0, // 最低价
    maxPrice: 0, // 最高价
    minPriceArr: [],
    maxPriceArr: [],
    stock: 0,
    onSale: 0, // 商品状态1:上架、2:下架（仓库）、3 售罄
    specificationText: '', // 规格
    serveText: '' // 服务
});
const querryId = getUrlParam('id');
// 获取商品详情
const goodsDetail = async () => {
    const { data } = await request('goodsDetail', { goodsId: querryId });
    Object.assign(state, data);
    state.mainImgList = Array.isArray(data.materialSrc) ? data.materialSrc : [];
    state.currentCoverIndex = state.mainImgList.findIndex(item => item?.isCover === 1);
    state.currentCoverIndex = state.currentCoverIndex === -1 ? 0 : state.currentCoverIndex;
    state.currentCoverUrl = state.mainImgList[state.currentCoverIndex].mainImgList;
    state.minPrice = floatDivide(data.goodsMinPrice);
    state.maxPrice = floatDivide(data.goodsMaxPrice);
    state.minPriceArr = state.minPrice.toString().split('.');
    state.maxPriceArr = state.maxPrice.toString().split('.');
    state.stock = data.goodsStock;
    state.specificationText = data.skuInfo[0]?.specAttr.map(item => item?.specAttrKeyName)?.join(';');
    if (state.stock === 0) state.onSale = 3;
    state.goodsDescription?.replace(/<img/gi, '<img style="max-width:100%;height:auto"');
    await nextTick();
    getHeight();
    getContainerHeight();
};
// 获取服务信息
const getRefundAddressInfo = async () => {
    const { data } = await request('refundAddressInfo');
    // shopDeliverySwitch === 1 快递发货开启
    // shopSelfLiftSwitch === 1 上门自提开启
    if (data.shopDeliverySwitch === 1 && data.shopSelfLiftSwitch === 1) {
        state.serveText = '快递发货｜上门自提';
        return;
    }
    if (data.shopDeliverySwitch === 1) {
        state.serveText = '快递发货';
        return;
    }
    if (data.shopSelfLiftSwitch === 1) {
        state.serveText = '上门自提';
    }
};
getRefundAddressInfo();

const getHeight = () => {
    uni.createSelectorQuery()
        .in(instance)
        .select('.goods_container')
        .boundingClientRect(data => {
            parent.postMessage({ cmd: 'goodsHeight', height: data.height }, '*');
        })
        .exec();
};
let timer = null;
let count = 0;
const getContainerHeight = () => {
    if (count > 10) {
        clearInterval(timer);
        return;
    }
    timer = setInterval(() => {
        count++;
        getHeight();
    }, 500);
};
const changeSwiper = e => {
    state.swiperCurrentIndex = e.detail.current + 1;
};
onMounted(() => {
    goodsDetail();
});
onUnmounted(() => {
    timer && clearInterval(timer);
});
</script>
<style lang="scss" src="./style.scss" scoped></style>
